<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo"></x-slot>

        <x-jet-validation-errors class="mb-4" />

        @if (session('status'))
            <div class="mb-4 font-medium text-sm text-green-600">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('login_phone') }}">
            @csrf
            <div>
                <x-jet-label value="手机号"></x-jet-label>
                <x-jet-input class="block mt-1 w-full" type="phone" id="phone" name="phone" :value="old('phone')" placeholder="请输入手机号" required autofocus />
            </div>
            <div class="mt-4 block">
                <x-jet-label value="验证码"></x-jet-label>
                <label class="flex">
                    <x-jet-input type="text" name="captcha" required style="display: inline;width: 70%;" placeholder="请输入验证码" />
                    <x-jet-input type="button" class="ml-2 text-sm text-gray-600" style="display: inline;width: 30%;" value="获取验证码" onclick="getSmsCode()"></x-jet-input>
                </label>
            </div>
            <div class="flex items-center justify-end mt-4">
                <x-jet-button class="ml-4 text-lg">
                    登&nbsp;&nbsp;录
                </x-jet-button>
            </div>

        </form>
        <script>
            var $ = mdui.$;

            function getSmsCode(){

                var phone = $("#phone").val()
                if (phone.lenght <= 11) {
                    mdui.alert('手机号码不正确！');
                    return false;
                }

                mdui.$.ajax({
                    method: 'GET',
                    url: '/get_sms_code',
                    dataType: 'json',
                    data: {
                        phone: .
                    },
                    success: function(data) {
                        console.log(data);
                        if (data.state == true) {
                            return true;
                        } else {
                            mdui.alert(data.message);
                            return false;
                        }
                    }
                });
            }
        </script>
    </x-jet-authentication-card>
</x-guest-layout>
